//
//  UseTimeDateSegmentView.swift
//  EasePods
//
//  Created by 李然 on 2024/5/30.
//

import Foundation
import JXSegmentedView
import RxCocoa
import RxSwift
import EarbudsCommon

extension TimeRangeType {
    var title: String {
        switch self {
        case .daily: return R.string.localizable.common_unit_day()
        case .weekly: return R.string.localizable.common_unit_week()
        case .montly: return R.string.localizable.common_unit_month()
        case .yearly: return R.string.localizable.common_unit_year()
        }
    }
}

class UseTimeDateSegmentView: View {
    
    let dataSource: [TimeRangeType] = [.daily, .weekly, .montly]
    
    var selectedItem: Observable<TimeRangeType> {
        return self.segmentedView.rx.selectedItem.map { TimeRangeType.init(rawValue: $0) ?? .daily }
    }
    
    override func makeUI() {
        super.makeUI()
        
        addSubview(segmentedView)
        segmentedView.snp.makeConstraints { make in
            make.edges.equalToSuperview()
        }
        
        segmentedView.collectionView.addSubview(firstLineView)
        segmentedView.collectionView.addSubview(secondLineView)
        
        self.selectedItem.map { $0 == .daily || $0 == .weekly }
            .bind(to: self.firstLineView.rx.isHidden)
            .disposed(by: rx.disposeBag)
        
        self.selectedItem.map { $0 == .weekly || $0 == .montly }
            .bind(to: self.secondLineView.rx.isHidden)
            .disposed(by: rx.disposeBag)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        let bounds = self.bounds
        self.indicator.indicatorHeight = bounds.height - 8
        self.segmentDataSource.itemWidth = bounds.width / 3
        
        firstLineView.frame = CGRect(x: bounds.width / 3 - 0.5, y: 14, width: 1, height: 8)
        secondLineView.frame = CGRect(x: bounds.width * 2 / 3 - 0.5, y: 14, width: 1, height: 8)
    }
    
    lazy var firstLineView: View = {
        let view = View()
        view.backgroundColor = R.color.use_time_11_slide_line()
        view.layer.cornerRadius = 0.5
        return view
    }()
    
    lazy var secondLineView: View = {
        let view = View()
        view.backgroundColor = R.color.use_time_11_slide_line()
        view.layer.cornerRadius = 0.5
        return view
    }()

    lazy var segmentedView: JXSegmentedView = {
        let segmentedView = JXSegmentedView()
        segmentedView.backgroundColor = R.color.use_time_7_slider_bg()
        segmentedView.dataSource = segmentDataSource
        segmentedView.indicators = [indicator]
        segmentedView.setFastCorners(4)
        return segmentedView
    }()
    
    private lazy var indicator: JXSegmentedIndicatorBackgroundView = {
        let indicator = JXSegmentedIndicatorBackgroundView()
        indicator.indicatorColor = R.color.use_time_8_slide() ?? .clear
        indicator.indicatorCornerRadius = 4
        indicator.indicatorWidthIncrement = 0
        return indicator
    }()

    private lazy var segmentDataSource: JXSegmentedTitleDataSource = {
        let datasource = JXSegmentedTitleDataSource()
        datasource.itemSpacing = 0
        datasource.itemWidthSelectedZoomScale = 1
        datasource.isItemSpacingAverageEnabled = true
        datasource.titleNormalColor = R.color.use_time_9_slide_text_n() ?? .clear
        datasource.titleSelectedColor = R.color.use_time_10_slide_text_l() ?? .clear
        datasource.titleNormalFont = Fonts.systemFont(ofSize: 14)
        datasource.titleSelectedFont = Fonts.systemFont(ofSize: 14)
        datasource.titles = dataSource.map{ $0.title }
        return datasource
    }()

}
